<template>
	<view class="page">
		<view class="u-flex u-flex-middle">
			<image src="@/static/images/login/main_logo.png" style="width: 246rpx;height: 248rpx;" mode=""></image>
		</view>
		<view class="page-content">
			<yl-phone-msg-code :req-mobile-code="getCode" @codeChange="codeChange" />
			<view class="term">
				<image v-if="agree" src="https://xgd.izaodao.com/public_html/Public/yn/login/index/check.png" class="unCheck_icon" @click="agree = false"></image>
				<view class="unCheck" @click="agree = true" v-else></view>
				<view class="others">
					<text style="font-weight: 400;margin-left: 16rpx;">我已阅读并同意</text>
					<text @click="showModal(1)" data-target="Modal"
						style="font-weight: 400;color: #03A2EC;">《用户服务协议》,</text>
					<text @click="showModal(2)" data-target="Modal" style="font-weight: 400;color: #03A2EC;">《隐私政策》</text>
				</view>
			</view>
			<view class="log-btn" @click="login">
				<!-- <button type="default" class="log-btn">登录</button> -->
				登录
			</view>
			<view class="log-btn" @click="autoLogin">
				<!-- <button type="default" class="log-btn">登录</button> -->
				一键登录
			</view>
			<!-- <view class="forget" @click="toPass">
				账号密码登录
			</view> -->
		</view>
		
		<u-popup :show="dialogStatus" @close="close" mode="center" :safeAreaInsetBottom="false" >
			<view class="popText">
				请您认真阅读<text class="linkValue" @click="showModal(1)">《用户服务协议》</text>和<text class="linkValue" @click="showModal(2)">《隐私政策》</text>的全部条款，接受后可开始使用我们的服务
			</view>
			<view class="btnArea flex flex-between">
				<view class="cancelBtn flex-all-center" @click="dialogStatus = false">
					不同意
				</view>
				<view class="confirmBtn flex-all-center" @click="next">
					同意
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import api from '@/api/login.js'
	import API from '@/api/api.js'
	// import API from '@/api/photograph.js'
	export default {
		data() {
			return {
				dialogStatus: false,
				phone: '',
				code: '',
				inviteCode: '',
				tips: '',
				disabled1: false,
				agree: false,
				gradeId:0
			};
		},
		onLoad() {
			if(uni.getStorageSync('AUTH_TOKEN')){
				uni.switchTab({
					url: '/pages/home/index'
				})
			}
		},
		methods: {
			getCode(mobile, code) {
				// let result = await reqMobileCode(mobile)
				if (!uni.$u.test.mobile(mobile)) {
					uni.$u.toast('请输入正确手机号！');
					return;
				}
				console.log(mobile);
				//发送验证码
				uni.showLoading({
					title: '正在获取验证码'
				});
				api.sendCode(
					mobile
				).then((res) => {
					uni.$u.toast('发送成功！');
					if (parseInt(res.status) == 200) {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			codeChange(code) {
				console.warn(code);
				this.code = code.code;
				this.phone = code.mobile;
				this.inviteCode = code.inviteCode || ''
				console.log(this.inviteCode);
			},
			showModal(e){
				if(e==1){
					this.$toPage('/pages/mine/useragreement', '')
				}else{
					this.$toPage('/pages/mine/privacyagreement', '')
				}
			},
			login() {
				var that = this;
				if (!that.agree) {
					uni.$u.toast('请勾选并同意用户协议');
					return;
				}
				if (!uni.$u.test.mobile(that.phone)) {
					uni.$u.toast('请输入正确手机号');
					return;
				}
				if (!uni.$u.test.code(that.code, 6)) {
					uni.$u.toast('请输入验证码');
					return;
				}
				// API.signin({
				// 	apiKey: 'hzsgjmy',
				// 	apiSecret: 'aihsahgyns@'
				// }).then(res => {
				// 	uni.setStorageSync('X-SW-Auth-Token', res.data.accessToken);
				// })
				uni.login({
				  provider: 'weixin', //使用微信登录
				  success: function (loginRes) {
				    console.log('登录信息',loginRes.code);
					uni.setStorageSync('code',loginRes.code)
				  }
				});
				// 获取用户信息
				uni.getUserInfo({
					desc: '登录用的数据',
					success: userRes => {
						console.log('返回的用户信息', userRes)
						uni.setStorageSync('avatarUrl', userRes.userInfo.avatarUrl)
					}
				})
				
				api.login({
					mobile: that.phone,
					code: that.code
				}).then((resLog) => {
					if (resLog.data.token) {
							API.userInfo(resLog.data.token).then(res=>{
								// this.userInfo = res.data
								this.gradeId = res.data.gradeId
								uni.setStorageSync('AUTH_TOKEN', resLog.data.token);
								that.dialogStatus = true
							})
							// uni.setStorageSync('AUTH_TOKEN', res.data.token);
							// this.$toPage('/pages/index/index','switchTab')
					} else {
						uni.$u.toast(resLog.message);
					}
				});
				// 获取用户信息
				// uni.getUserInfo({
				// 	desc: '登录用的数据',
				// 	success: userRes => {
				// 		console.log('返回的用户信息', userRes)
				// 		// 微信登录拿到code
				// 		uni.login({
				// 			provider: 'weixin', // 使用微信登录
				// 			success: async lres => {
				// 				// console.log('请求微信登录返回的数据', lres);
				// 				const res1 = await api.getWxAuth({
				// 					code: lres.code
				// 				})
				// 				if (res1.status == 200) {
				// 					uni.setStorageSync('AUTH_TOKEN', res1.data.token.token);
				// 					this.$toPage('/pages/index/index', 'switchTab')
				// 				} else {
				// 					const {
				// 						info
				// 					} = res1.data.result
				// 					console.log('info', info)
				// 					const res2 = await api.getUserPhone({
				// 						openid: info.openid,
				// 						// nickname: userRes.userInfo.nickName,
				// 						// avatar: userRes.userInfo.avatarUrl,
				// 						// encryptedData: userRes.encryptedData,
				// 						// iv: userRes.iv,
				// 						phone: that.phone,
				// 						code: that.code,
				// 						invite: that.inviteCode ? that.inviteCode : ''
				// 					})
				// 					uni.setStorageSync('AUTH_TOKEN', res2.data.token.token);
				// 					this.$toPage('/pages/index/index', 'switchTab')
				// 				}
				// 			}
				// 		})
				// 	}
				// })
			},
			autoLogin () {
				uni.switchTab({
					url: '/pages/home/index'
				})
			},
			toPass() {
				this.$toPage('/pages/login/passwordLogin', '')
			},
			toWxLogin() {
				this.$toPage('/pages/login/wxLogin', '')
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			},
			close () {
				this.dialogStatus = false
			},
			next () {
				if(this.gradeId==0){
					uni.navigateTo({
						url: '/pages/login/userpaint'
					})
				}else{
					uni.switchTab({
						url: '/pages/home/index'
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .u-popup__content {
		width: 90%;
		padding: 60rpx;
		border-radius: 40rpx;
		overflow: hidden;
	}
	.page {
		// height: 100vh;
		// position: fixed;
		width: 100%;
		// background: linear-gradient( 180deg, #E6EEFF 0%, #FFFFFF 100%);
		padding-top: 120rpx;
		.page-content {
			height: 100%;
			padding: 116rpx 60rpx 30rpx;
			.title-text {
				margin-top: 256rpx;
				margin-bottom: 130rpx;
				font-size: 50rpx;
				font-family: PingFangSC-Regular-, PingFangSC-Regular;
				font-weight: normal;
				color: #282828;
			}

			.log-btn {
				margin-top: 20px;
				height: 88rpx;
				background: linear-gradient(180deg, #59BBFD 0%, #3DABF6 100%);
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				color: #FFFFFF;
				font-weight: bold;
				font-weight: normal;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 62px 62px 62px 62px;
				background-size: 100% 100%;
			}

			.forget {
				margin-top: 32rpx;
				// display: flex;
				// justify-content: center;
				font-size: 26rpx;
				font-family: PingFangSC-Regular-, PingFangSC-Regular;
				font-weight: normal;
				color: #686868;
			}

			.otherType {
				display: flex;
				justify-content: space-between;
				align-items: center;

			}

			.register {
				position: fixed;
				bottom: 242rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Medium-, PingFangSC-Medium;
				font-weight: normal;
				color: #282828;

				text {
					color: #3EACF7;
				}
			}

		}
	}

	::v-deep uni-button:after {
		border: none !important;
	}

	::v-deep uni-checkbox .uni-checkbox-input {
		width: 25.22rpx;
		height: 25.22rpx;
		border-radius: 25.22rpx;
	}

	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
		font-size: 18rpx;
	}

	::v-deep uni-checkbox-group {
		justify-content: start;
	}

	checkbox-group {
		height: 36rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	checkbox {}

	/*checkbox 选项框大小  */
	checkbox .wx-checkbox-input {
		width: 50rpx;
		height: 50rpx;
	}

	/*checkbox选中后样式  */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #07c203;
	}

	/*checkbox选中后图标样式  */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		width: 28rpx;
		height: 28rpx;
		line-height: 28rpx;
		text-align: center;
		font-size: 22rpx;
		color: #fff;
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}

	.popup-content {
		background-color: #fff;
		border-radius: 28rpx;
		padding: 36rpx;
		width: 510rpx;
	}

	.pop-title {
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 600;
		color: #2F2932;
		display: flex;
		justify-content: center;
		margin-bottom: 36rpx;
	}

	.pop-content {
		font-size: 24rpx;
		font-family: PingFangSC-Regular-, PingFangSC-Regular;
		font-weight: normal;
		color: #777B80;
	}

	.pop-btn {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.confirm-btn {
		width: 300rpx;
		height: 80rpx;
		background: linear-gradient(180deg, #59BBFE 0%, #37A7F3 100%);
		border-radius: 38rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 16rpx 0;

		text {
			color: #FFFFFF;
		}
	}

	.unCheck {
		width: 24rpx;
		height: 24rpx;
		border: 1px solid #888888;
		border-radius: 50%;
	}

	.unCheck_icon {
		width: 24rpx;
		height: 24rpx;
	}

	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 50rpx;
		color: #282828;
	}

	.tips {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
	}

	.term {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		display: flex;
		align-items: center;
		.unCheck_icon,
		.unCheck {
			flex-shrink: 0;
		}

		.others {
			display: flex;
			flex-wrap: wrap;
			word-break: break-all;
		}

	}
	.popText {
		color: #282828;
		line-height:50rpx;
		font-size: 30rpx;
		.linkValue {
			color: #03A2EC;
		}
	}
	.btnArea {
		margin-top: 44rpx;
		.cancelBtn,
		.confirmBtn {
			width: 234rpx;
			height: 80rpx;
			border-radius: 40rpx;
		}
		.cancelBtn {
			color: #282828;
			border: 1rpx solid #707070;
		}
		.confirmBtn {
			color: #FFF;
			background: #03A2EC;
		}
	}
</style>